<style lang="less" scope>
  @import "../assets/css/config.less";
  #breadcrumb{
    display: flex;
    justify-content: start;
    .flex-row{
      cursor: default;
      font-size: 14px;
      display: flex;
      justify-content: start;
      color: #999;
      h5{
        font-size: 14px;
      }
      .active{
        color: #999;
        cursor: pointer;
        &:hover{
          color: @color2;
        }
      }
    }
  }
  
  .doc{
    margin: 0 8px;
  }
</style>

<template>
  <div id="breadcrumb">
    <span class="flex-row" v-for="(item, index) in prop" :key="index">
      <h5 v-if="item.blod" :class="item.to?'active':''" @click="toTarget(item.to)">{{item.name}}</h5>
      <p v-else-if="index!==prop.length-1" :class="item.to?'active':''" @click="toTarget(item.to)">{{item.name}}</p>
      <p v-else>{{item.name}}</p>
      <p class="doc" v-if="index!==prop.length-1">> </p>
    </span>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  props: ['prop'],
  mounted(){
  },
  methods: {
    toTarget(link){
      let ss =/^(\w+_)?\w+,\d+,\d+$/
      if(!ss.test(link)){
        this.$router.push({
          name: link
        });
        return;
      }
      // this.$router.push({
      //   name: "index",
      //   params: {
      //     menu: link
      //   }
      // });
      this.$router.go(-1)
      // let classname = link.split(",")[0]
      // switch(classname){
      //   case "js": 
      //     this.toJS();
      //     break;
      //   case "wx":
      //     this.toWX();
      //     break;
      //   case "ydhlw":
      //     this.toYDHLW();
      //     break;
      //   case "wx_new":
      //     this.toWxNew();
      //     break;
      // }
    }
    
  }
}
</script>